<template>
  <div class="home-guide-component">

    <div class="flex-s">
      <section class="titPic"></section>

      <section class="box" v-for="(item, index) in guides" @click="toggleModal(true,index)">
        <div class="icon" :style="`background-position: -${(index % 2) *42}px 0`"/>
        <h5>{{item.label}} </h5>
        <p>{{item.path}}</p>
      </section>

    </div>

  </div>

  <Modal v-model:visible="visible" :closable="false" :width="1000" :footer="null">
    <Carousel ref="car" dotsClass="dots">
      <div class="imgBox" v-for="item in showImg" >
        <div v-if="Array.isArray(item)">
          <img :src="item[0]" alt="">
          <p class="af1">
            <span class="orange">提交相关资料，办理CA锁</span> <br>企业CA办理流程：
            <a class="blue" href="/articleDetail/0kayp-q78000-00n2a" target="_blank">
              https://jsy.xjjs.gov.cn/articleDetail/0kayp-q78000-00n2a
            </a>
          </p>
        </div>
        <div v-else>
          <img :src="item" alt="">
        </div>
      </div>
    </Carousel>
    <p class="text-center">
      <Button type="primary" shape="round" @click="prev">上一步</Button>
      <Button type="primary" shape="round" @click="next">下一步</Button>
      <Button type="primary" shape="round" @click="toggleModal(false,100)">我知道了</Button>
    </p>
  </Modal>
</template>

<script lang="ts">
import { defineComponent, ref, unref } from 'vue'
import {  Modal , Button , Carousel } from 'ant-design-vue';
import img1_1 from '/@/assets/img/home1-1.png';
import img1_2 from '/@/assets/img/home1-2.png';
import img1_3 from '/@/assets/img/home1-3.png';
import img1_4 from '/@/assets/img/home1-4.png';
import img2_2 from '/@/assets/img/home2-2.png';
import img2_3 from '/@/assets/img/home2-3.png';
import img2_4 from '/@/assets/img/home2-4.png';
import img3_1 from '/@/assets/img/home3-1.png';
import img3_2 from '/@/assets/img/home3-2.png';
import img3_3 from '/@/assets/img/home3-3.png';
import img3_4 from '/@/assets/img/home3-4.png';
import img4_1 from '/@/assets/img/home4-2.png';
import img4_2 from '/@/assets/img/home4-1.png';
import { DoubleRightOutlined } from '@ant-design/icons-vue';
import type { configItem } from '/@/api/common';

export default defineComponent({
  components: {  DoubleRightOutlined , Modal , Button , Carousel },
  setup() {
    const visible = ref<boolean>(false);
    const car = ref<Nullable<HTMLElement>>(null);
    const guides = ref<configItem[]>([
      { key: 0, label: '我是从业人员',path:'服务对象：企业法人(经营负责人)、建设行业有各类从业资格人员' },
      { key: 1, label: '我是疆内企业',path:'服务对象：区内各类建筑业企业'},
      { key: 2, label: '我是疆外企业',path:'服务对象：进疆承揽业务的各类外省建筑业企业' },
      { key: 3, label: '我是主管部门',path:'服务对象：各层级建设行业行政主管单位' }
    ]);
    const imgArr = [
        [img1_1 , img1_2 ,img1_3 , img1_4 ],
        [[img3_1] , img2_2 ,img2_3 ,img2_4] ,
        [[img3_1] , img3_2 ,img3_3 ,img3_4] ,
        [img4_1 , img4_2 ]
    ]
    const showImg =  ref();
    const toggleModal = (boolean,index) => {
      showImg.value = imgArr[index];
      goToFirst();
      visible.value = boolean;
      if(!boolean){
        showImg.value = [];
      }
    };
    const goToFirst = ()=>{
      unref(car)?.goTo(0,true);
    }
    const prev= ()=>{
      unref(car)?.prev();
    }
    const next= ()=>{
      unref(car)?.next();
    }
    return { car , guides, imgArr , showImg , visible , toggleModal , next , prev , goToFirst }
  }
})
</script>

<style lang="less" scoped>

.titPic{
  width: 190px;
  height: 200px;
  background: url('/src/assets/img/home_guide.png') no-repeat;
}

.box{
  width: 237px;
  height: 200px;
  padding: 30px 24px;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);

  .icon {
    width: 42px;
    height: 42px;
    background: url('/public/resource/image/yindao.png') no-repeat;
  }

  h5 {
    margin: 10px 0;
    font-size: 20px;
    line-height: 1;
    color: #CD1922;
  }

  &:hover {
    border: 1px solid #0078FF;

  }
}

.text-center{
  padding-top: 20px;
  text-align: center;
}

.imgBox{
  position: relative;

  img{
    margin: 0 auto;
  }

  .af1{
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

::v-deep {
  .ant-btn-round {
    margin: 0 20px;
  }
}
</style>
<style lang="less">
.ant-carousel {
  .dots{
    bottom: -10px !important;

    button {
      background: @blue !important;
    }
  }
}
</style>
